<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
		<link rel="stylesheet" href="/admin/js-css/css/pageLR.css">
		<link rel="icon" href="img/logo.png">
		<title>系统登录</title>
		<style>
			/**该样式是左右滑动需要**/
			.__pointer-events-none {
				pointer-events: none !important;
			}
		</style>
	</head>

	<body>
		<div id="app" style="display: flex;">
			<el-container>
				<div style="display: flex;height: 100%;">
					<el-aside :width="sideWidth+'px'" id="control"><iframe style="height: 99%;" :src="lefturl" width="100%"
																 frameborder="0"></iframe></el-aside>
					<label onmousedown="mousedown(this,event)"
						   style="cursor:col-resize;max-width:4px;width:4px;background:#ddd;height: 100%;">&nbsp;</label>

					<label class="btnLeft" style="cursor:pointer;height: 100%;display: flex;align-items: center;"
						   onmousedown="mouserightbtn(this)"><label> <i class="el-icon-arrow-right btnLeft"
																		style="color: #7c7c7c;cursor:pointer;"></i></label></label>
				</div>
				<el-main>
					<iframe :src="iframeurl" frameborder="0" style="width: 100%;height: 99%;"></iframe>
				</el-main>
			</el-container>

		</div>
		<script>
			var isResizing = false,
					lastDownX = 0;
			var docu = null;

			function mousedown(doc, e) {
				document.querySelectorAll('iframe').forEach(e => e.classList.add('__pointer-events-none'));
				console.log("开始")
				docu = doc;
				isResizing = true;
				lastDownX = e.clientX;
			}

			function mouseseup_fun(e){
				document.querySelectorAll('iframe').forEach(e => e.classList.remove('__pointer-events-none'));
				console.log("停止")
				isResizing = false;
			}

			$(document).ready(function(){
				$(window).on('mousemove', function(e) {
					if(!isResizing){
						return ;
					}
					let container = $(docu).prev("#control");
					let offsetRight = (e.clientX - container.offset().left - container.width());
					vm.sideWidth = container.width() + offsetRight - 10;
				});


				document.addEventListener("mouseup", function(event) {
					console.log("鼠标左键被松开，位置：", event.clientX);
					mouseseup_fun(event);
				});
			});



			function mouserightbtn(doc) {
				let item = document.getElementById("control")
				if (item.style.width === "0px") {
					item.style.width = "200px"
				} else {
					item.style.width = "0px"
				}
			}
		</script>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data() {
				return {
					lefturl: "/admin/html/columnManagement/leftTree.html?v=" + guid(),
					iframeurl: "",
					sideWidth:200,
				}
			},
			methods: {
				setUrl(url) {
					this.iframeurl = url;
				}
			}
		})
	</script>

</html>
